<template>
	<view class="bg-wrap">
		<view class="conten">
			<view class="down-logo">
				<view></view>
				<image src="/static/login/logo2x.png" mode="aspectFill"></image>
				<h4 class="text-00D7FF fz-40 m-0 p-0">POSTRINGS+</h4>
			</view>
			<view class="text-info">邀请您加入全球领先的数字藏品交易平台</view>
			<view class="down-btn" v-if="isAndroid" @click="AndHref">立即下载</view>
			<view class="down-btn" v-if="isIOS" @click="toDownHref">IOS点击下载</view>
			<a @tap="toDownIos" class="install" v-if="isIOS">
				<u>IOS安装教程</u>
			</a>
			<view class="mask" v-show="isMask">
				<image src="/static/login/img-icon-down.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: null,
				versionData: {
					download_link: null,
					ios_link: null
				},
				isWeChat: false,
				isMask: false,
				isAndroid: false, //是否安卓
				isIOS: false, //是否IOS,
				isCanDown: false,
				isLine:false
			}
		},
		onLoad() {
			
			var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
			if (ua.match(/MicroMessenger/i) == "micromessenger") {
				this.isWeChat = true
			}
			var u = navigator.userAgent;
			this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
			this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			
			
			
			this.$store.dispatch('public/version').then(res => {
				this.versionData = res.data
			})
			var userAgent = window.navigator.userAgent;  //window可以省略
			//判断是否Safari浏览器
			if (userAgent.indexOf("Line") > -1) {
				this.isLine = true
			}
			if (this.isWeChat || this.isLine) {
				this.isMask = true
			}
			
			
		},
		methods: {
			AndHref() {
				//如果是安卓微信内，点击下载安卓链接
				if (this.isWeChat && this.isAndroid) {
					this.isMask = true
					//如果是IOS微信内，点击下载安卓链接，显示图层（IOS打开APK会乱码）
				} else if (this.isWeChat && this.isIOS) {
					this.isMask = true
				} else {
					window.location.href = this.versionData.download_link
				}
			},
			//下载IOS
			toDownHref(){
				window.location.href = 'https://lotao.oss-accelerate.aliyuncs.com/postrings%2B/POSTRINGS%2B.mobileconfig'
			},
			//IOS安装教程
			toDownIos(){
				uni.navigateTo({
					url:'/pages/login/downIos'
				})
			},
		}
	}
</script>

<style lang="scss">

	.mask{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.8);
		image{
			display: block;
			width: 690upx;
			height: 550upx;
			margin: 0 auto;
		}
	}
	.bg-wrap{
		width: 100vw;
		height: 100vh;
		background-color: #000000;
	}
	.conten {
		width: 100vw;
		height: 100vh;
		background: url(/static/home/download.png) no-repeat;
		background-size: 100%;
		background-position: bottom;
		box-sizing: border-box;
		
			.down-logo {
				padding-top: 140upx;
				box-sizing: border-box;
				text-align: center;
				.text-FF9D00 {
					color: #FFC23F;
				}
				image {
					width: 140upx;
					height: 140upx;
					vertical-align: top;
					margin-bottom: 32upx;
					border-radius: 20upx;
				}
			}

			.text-info {
				font-size: 28upx;
				text-align: center;
				color: #D5FCFF;
				margin-top: 6upx;
			}


		.down-btn {
			width: 640upx;
			height: 94upx;
			background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
			border-radius: 49upx;
			position: fixed;
			bottom: calc(var(--window-bottom) + 140upx);
			left: 50%;
			transform: translateX(-50%);
			font-size: 34upx;
			font-family: "PFSC";
			font-weight: 500;
			color: #0B4173;
			line-height: 88upx;
			text-align: center;
		}
	}
	.install{
		position: fixed;
		bottom: calc(var(--window-bottom) + 80upx);
		left: 50%;
		transform: translateX(-50%);
		color: #ffffff!important;
		font-size: 28upx !important;
		line-height: 28upx;
		text-align: center;
	}
</style>
